<template>
  <div class="wrapper">
      <div class="top">
          <van-nav-bar
          title="疫苗详细"
          left-text="返回"
          @click-left="onClickLeft"
          left-arrow
      />
      </div>
      <div class="content">
          <van-cell-group inset>
          <van-field
          v-model="vaccinename"
          required
          label="药品名称"
          right-icon="arrow"
          />
          <van-field
          required
          label="日期"
          right-icon="arrow"
          v-model="thedata"
          />
          <van-field
          v-model="location"
          required
          label="接种位置"
          right-icon="arrow"
          />
          <van-field
          v-model="vaccineno"
          required
          label="疫苗编号"
          right-icon="arrow"
          />
          <van-field
          v-model="manufacturer"
          required
          label="生产厂家"
          right-icon="arrow"
          />
          <van-field
          v-model="addresss"
          required
          label="接种地点"
          right-icon="arrow"
          />
          <van-field
          v-model="responsibleperson"
          required
          label="责任人"
          right-icon="arrow"
          />
          <van-field
          v-model="age"
          label="月龄"
          placeholder="请填写月龄"
          right-icon="arrow"
          />
          </van-cell-group>
          <div class="twobutton">
              <van-button type="danger">删除</van-button>
          </div>
      </div>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue';
import axios from 'axios';
export default {
  created(){
    this.getActivityData()
  },
  data(){
    return{
      vaccinename:"",
      thedata:"",
      location:"",
      vaccineno:"",
      manufacturer:"",
      addresss:"",
      responsibleperson:"",
      age:"",
    }
  },
  methods:{
    getActivityData(){
    axios.get('/vaccine').then((res)=>{
      console.log(res);
      const datalist=res.data.result.data
      datalist.forEach((item)=>{
        if(this.$route.query.vaccinename==item.vaccinename){
            this.vaccinename=item.vaccinename
            this.location=item.location
            this.vaccineno=item.vaccineno
            this.thedata=item.thedata
            this.manufacturer=item.manufacturer
            this.addresss=item.addresss
            this.responsibleperson=item.responsibleperson
            this.age=item.age
        }
      })
    })
    .catch(function(err){
      console.log(err);
    });
    
    }
  },
  setup() {
    const onClickLeft = () => history.back();

    return {
      onClickLeft,
    };
  },
};

</script>
<style scoped>
.van-cell{
  border: 1.2px solid #ccc;
}
.analyse{
  margin-top: 15px;
}
#myChart{
  width: 300px;
  height: 300px;
  margin-left: 40px;
}
span{
  margin-left: 15px;
  font-size: 20px;
  font-weight: bold;
}
.van-button--danger{
  margin-top: 20px;
  margin-left: 20px;
  width: 320px;
}
</style>